<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			message=<span v-once>{{message}}<br><!-- <span v-once>这个值将不会改变 -->
			rawHtml={{rawHtml}}<br>
			rawHtml=<div v-html="rawHtml"><span v-bind:title="message"></div>
			<br>
			    鼠标悬停几秒钟查看此处动态绑定的提示信息！
			  </span>
			  <p v-if="seen">现在你看到我了</p>
			  <ul>
				  <li v-for="todo in todos"><!-- for循环 -->
					  {{todo.text}}
				  </li>
			  </ul>
			  <br>
			  <button v-on:click="reverseMsg">翻转消息</button><br>
			  在这里你可以修改第一行的内容
			  <input v-model="message"><br>
			  <ol>
				  <todo-item
				      v-for='item in todos'
					  v-bind:todo='item'
					  v-bind:key='item.id'
				  ></todo-item>
			  </ol><br>
			  <a v-bind:href='url'>a link</a><br>
			  <a v-bind:[xyz]='url'>b link</a><br>
			  <form action="" v-on:submit.prevent="onSubmit"><!-- 阻止刷新页面 -->
				  <button type="submit">submit</button>
			  </form>
		</div>
	</body>
	<script>
		// 定义名为 todo-item 的新组件
		Vue.component('todo-item', {
			props:['todo'],//从外界接收信息
			template: '<li>{{todo.text}}</li>'
		})
		
		
		var app = new Vue({
		  el: '#app',//指定元素挂载在DOM上
		  data: {
		    message:  '页面加载于 ' + new Date().toLocaleString(),
			seen:true,
			rawHtml:'<span style="color:red">红色的字</span>',
			url:'https://www.baidu.com',
			xyz:'href',
			todos:[{text:'123',id:1},{text:'456',id:2},{text:'789',id:3}]//由集合组成的数组
		  },
		  methods:{
			  reverseMsg:function(){
				  this.message=this.message.split('').reverse().join('')
			  }
		  }
		})
	</script>
</html>
